/*
 * @Author: caijw 
 * @Date: 2018-11-11 13:14:20 
 * @Last Modified by: caijw
 * @Last Modified time: 2018-12-01 22:10:52
 * 
 * 修改昵称
 */

import React, { Component } from 'react';
import Header from '../../../../components/Header/Header';
import ToastUi from '../../../../components/Toast/Toast';
import { connect } from "react-redux";
import { Toast } from 'react-weui';
import * as actions from '../../../../store/action/my';
import '../../../../static/css/common.less';
import './changeName.less';

class ChangeName extends Component {

    state = {
        showToast: false
    };

    username = React.createRef();

    handleSubmit = (e)=>{
        e.preventDefault();
        let name = this.username.current.value;
        let data = this.props.my.user;
        let id = this.props.my.user.id;
        data.nickname = name;
        this.props.changeUserName(id, data);  
    }


    //这里可以设置
    componentWillReceiveProps = () =>{
        setTimeout(()=>{
            if(this.props.my.nameRet == 0){
                this.setState({showToast: true});
                this.state.toastTimer = setTimeout(()=> {
                    this.setState({showToast: false});
                }, 2000);
            }
        },100)
    }

    render() {
        return (
            <div>
                <Toast icon="loading" show={this.props.my.fetching}>Loading...</Toast>
                <div className="detail-region">
                    <Header title="修改昵称"></Header>
                    <Toast icon="success-no-circle" show={this.state.showToast}>修改成功</Toast>
                    <form onSubmit={this.handleSubmit}>
                        <section className="content">
                            <div className="content-title">原昵称:{this.props.my.user.nickname}</div>
                            <div className="sumbit-item">
                                <div class="submit-item-title">昵称：</div>
                                <input type="text" placeholder="请输入昵称" ref={this.username} id="username" required></input>
                            </div>
                            <button className="submit-btn" type="submit">保存</button>
                        </section>
                    </form>
                </div>
            </div>
        )
    }
}


//把组件和store关联在一起
export default connect((state)=>{return {...state}}, actions)(ChangeName);